<template>
	<view>
		<scroll-view class="index-notice-content">
		  <view class="an-notice-content-item">
			<view class="iconfont icon-tongzhi"></view>
				<swiper v-if="show" class="swiper" :autoplay="true" :interval="switchTime*1000" :duration="1500"
					:circular="true" :vertical="true">
					<swiper-item v-for="(item, index) in list" :key="index" @tap="getId(item.id)" style="flex: 1;">
						<view class="swiper-item">
							<view class="swiper-flex"><text v-if="item.is_read == 0"></text><view>{{item.title}}</view></view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="allMessage" @tap.stop="gotoList">全部</view>
		</scroll-view>
	</view>
</template>

<script>
	import uniIcons from '../uni-icon/uni-icon.vue'
	export default {
		components: {
			uniIcons
		},
		props: {
			message_list: {},
			color: {
				type: String,
				default: '#000'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			switchTime: {
				type: Number,
				default: 3
			},
			showSerial: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				number: 0,
				list: this.message_list,
				copyText: '',
				show: '',
			};
		},
		mounted() {
			this.show = true;
		},
		watch: {
			message_list() {
				this.list = this.message_list
			}
		},
		methods: {
			gotoList(){
				uni.navigateTo({
					url:"/pages/notice/index"
				})
			},
			more() {
				this.show = false;
				this.$emit('more')
			},
			getId(id){
				uni.navigateTo({
					url:'/pages/notice/detail?id=' + id
				})
			},
		}
	}
</script>

<style>
	.index-notice-content{
		width: 93%;
		background: #fff;
		margin: 13px 0;
		padding: 7px 12px;
		display: flex;
		align-items: center;
		font-size: 14px;
		border-radius: 3px;
		position: relative;
	}
	.swiper {
		width: 87%;
		height: 60upx !important;
	}
	.swiper-item{display: flex;align-items: center;margin-left: 25px;}
	.swiper-flex {width:85%;display:flex;align-items: center;}
	.swiper-flex .iconfont {
	    font-size: 24px;
	    margin-right: 5px;
	}
	.swiper text{
		background: red;
		width: 4px;
		height: 4px;
		margin-right: 4px;
		border-radius: 27px;
	}
	.an-notice-box {
		background: #fff;
		width: 100%;
		padding: 6px 12px;
		overflow: hidden;
		display: flex;
		justify-content: flex-start;
	}

	.an-notice-box .an-notice-l {
		display: flex;
		align-items: center;
	}

	.icon-tongzhi {
		color: #1172fd;
		font-size: 21px;
		margin-top: -1px;
		margin-right: 2px;
		position: absolute;
		left: 0;
		top: 2px;
	}

	.an-notice-box .an-notice-l-title {
		font-size: 17px;
		color: #fdd100;
		font-weight: bold;
		font-style: italic;
		margin-bottom: 2px;
	}

	.an-notice-icon {
		width: 60upx;
		height: 60upx;
		line-height: 50upx;
		text-align: center;
		position: relative;
	}

	.an-notice-content {
		width: calc(100% - 220upx);
		position: relative;
		font-size: 14px;
		padding-left: 6px;
		flex: 1;
	}

	.an-notice-content-item {
		width: 100%;
		height: 60upx;
		text-align: left;
		line-height: 60upx;
		position: relative;
	}

	.an-notice-content-item-text {
		display: block;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.an-notice-more {
		font-size: 13px;
		color: #b7b7b7;
		text-align: center;
		display: flex;
		align-items: center;
	}

	.an-notice-more-l {
		text-decoration: underline;
		margin-right: 3px;
	}

	@keyframes anotice {
		0% {
			transform: translateY(100%);
		}

		30% {
			transform: translateY(0);
		}

		70% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100%);
		}
	}
	.allMessage{
		color: #fca51a;
		position: absolute;
		right: 0;
		top: 5px;
	}
</style>
